import React, { memo } from 'react'
import {HNSongsHeaderWrap} from './style'
import {useDispatch,useSelector,shallowEqual} from 'react-redux'
import HNCategories from '../categories'
import {changeIsShowCatagory} from '../../store/actionCreators'
export default memo(function HNSongsHeader() {

  const {isShowCataroty,currentCatagory} = useSelector(state => ({
    isShowCataroty : state.getIn(["songs","isShowCataroty"]),
    currentCatagory : state.getIn(["songs","currentCatagory"])
  }),shallowEqual)
  console.log(currentCatagory);
  const dispatch = useDispatch();
  return (
    <HNSongsHeaderWrap className="wrap-v2">
      <div className="content1">
      <div className="left">
      <h3 className="title">
        <span>{currentCatagory}</span>
      </h3>
      <div className="select sprite_button" onClick={e=>{dispatch(changeIsShowCatagory(!isShowCataroty))}}>
        <i className="sprite_button">
          选择分类
        </i>
        <span className='sprite_icon2 down'></span>
      </div>
      </div>
      <div className="hot sprite_button2">热门</div>
      </div>
      {isShowCataroty && <HNCategories/>}
    </HNSongsHeaderWrap>
  )
})
